<template>
  <div class="app-container">

    <el-button type="primary" plain>采购单信息</el-button>
    <el-form :model="form" ref="form" size="small" inline label-width="108px" style="margin-top: 40px">
      <el-form-item label="订单号："   ><el-input v-model="orderList.orderNo" readonly /></el-form-item>
      <el-form-item label="公司："   ><el-input v-model="orderList.companyName" readonly /></el-form-item>
      <el-form-item label="门店："   ><el-input v-model="orderList.shopName" readonly /></el-form-item>
      <el-form-item label="供应商："  ><el-input v-model="orderList.supplyName" readonly /></el-form-item></br>
      <el-form-item label="操作人："   ><el-input v-model="orderList.userName" readonly /></el-form-item>
      <el-form-item label="商品种类："   ><el-input v-model="orderList.kind" readonly /></el-form-item>
      <el-form-item label="总价："   ><el-input v-model="orderList.price" readonly /></el-form-item>
      <el-form-item label="送货时间："   ><el-input v-model="orderList.acceptTime" readonly /></el-form-item>


      <el-steps :space="800" :active="orderList.status-0+1" finish-status="success" style="margin-top: 20px">

        <el-step title="发起采购单" :description="orderList.ctime"></el-step>
        <el-step title="审核采购单" :description="parseTime(orderList.reviewTime, '{y}-{m}-{d} {h}:{i}')"></el-step>
        <el-step title="供货商确认接单" :description="parseTime(orderList.takeTime, '{y}-{m}-{d} {h}:{i}')"></el-step>
        <el-step title="商家确认订单" :description="parseTime(orderList.confirmTime, '{y}-{m}-{d} {h}:{i}')"></el-step>
        <el-step title="供货商送货完成" :description="parseTime(orderList.arriveTime, '{y}-{m}-{d} {h}:{i}')"></el-step>
      </el-steps>


    </el-form>

    <el-button type="primary" plain style="margin-top: 40px;">商品清单</el-button>
    <el-table :data="goodsList" style="margin-top: 20px">
      <!-- 隐藏id列 -->
      <el-table-column prop="goodsid" width="100" ><template slot-scope="scope"><el-input type="hidden" v-model="scope.row.goodsid" /></template></el-table-column>
      <el-table-column prop="goodsName" label="商品名称" ></el-table-column>
      <el-table-column prop="goodsNum" isedit label="订单数量" > </el-table-column>
      <el-table-column prop="goodsNumReal" isedit label="实际送达" > </el-table-column>
      <el-table-column prop="goodsUnit"  label="单位" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_goods_unit" :value="scope.row.goodsUnit"/>
        </template>
      </el-table-column>
      <el-table-column prop="realPrice" label="商品价格" ></el-table-column>
      <el-table-column prop="totalPriceReal" label="小计"  ></el-table-column>
<!--      <el-table-column prop="stock" label="当前库存" />-->
      <el-table-column prop="remarkShop" label="商家备注" ></el-table-column>
      <el-table-column prop="remarkSupply" label="供货商备注" ></el-table-column>
      <el-table-column prop="remarkSupply" label="收货照片" >
        <template slot-scope="scope">
          <image-preview :src="scope.row.devicePic" :width="100" :height="100"/>
        </template>
      </el-table-column>
      <el-table-column prop="refundNum" label="退货数量" ></el-table-column>
      <el-table-column prop="checkRemark" label="验收说明" ></el-table-column>
      <el-table-column prop="checkUser" label="验收人" ></el-table-column>
    </el-table>

    <!-- 货品照片目前都放在货品中 -->
<!--    <template v-if="orderList.receiveId != null && orderList.receiveId > 0" >-->
<!--    <el-button  type="primary" plain style="margin-top: 40px;" >收货信息</el-button>-->
<!--    <el-form :model="form" ref="form" size="small" inline label-width="108px" style="margin-top: 40px" >-->
<!--      <el-form-item label="送货人："><el-input v-model="receiveLog.userName" readonly /></el-form-item><br>-->
<!--      <el-form-item label="送货人照片："><image-preview :src="this.receiveLog.userPic" :width="50" :height="50"/></el-form-item><br>-->
<!--      <el-form-item label="货品照片：">-->
<!--        <image-preview v-for="item in receivePics" :src="item" :width="100" :height="100"/>-->
<!--      </el-form-item>-->
<!--    </el-form>-->
<!--    </template>-->

    <!-- 评价信息 -->
    <template v-if="orderList.status == 5" >
      <el-button  type="primary" plain style="margin-top: 40px;" >评价信息</el-button>
      <el-form :model="form" ref="form" size="small" inline label-width="108px" style="margin-top: 40px" >
      <el-form-item label="服务评分">
        <el-rate style="margin-top: 8px;" disabled v-model="orderList.starService" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" />
      </el-form-item>
      <el-form-item label="质量评分">
        <el-rate style="margin-top: 8px;" disabled v-model="orderList.starQuality" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" />
      </el-form-item>
      <el-form-item label="准时评分">
        <el-rate style="margin-top: 8px;" disabled v-model="orderList.starTimely" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" />
      </el-form-item>
      </el-form>
    </template>

    </br>
    <el-button type="primary" size="mini" @click="submitForm"  style="margin-top: 20px">确定</el-button>



  </div>
</template>

<script>
import { listOrderlist, getOrderlist, delOrderlist, addOrderlist, updateOrderlist,getOrderGoodsDetail } from "@/api/system/orderlist"
import {getReceiveLog} from "@/api/system/receiveLog"
export default {
  name: "Orderlist",
  dicts: ['sys_goods_unit','sys_list_status'],
  data() {
    return {
      receivePics: [],
      //送货信息记录
      receiveLog:{},
      // 采购单表格数据
      goodsList: [],
      //采购单信息
      orderList:{},
      //订单ID
      listid:"",
      // 公司列表
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 品类数量时间范围
      daterangeCtime: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    }
  },

  //当获取焦点是触发
  activated() {

    this.listid = this.$route.query.id
    this.getOrderlist(this.listid)
    this.getOrderGoodsDetail(this.listid)
  },
  created() {
    this.listid = this.$route.query.id
    this.getOrderlist(this.listid)
    this.getOrderGoodsDetail(this.listid)
  },
  methods: {

    //收货记录
    getReceiveLog(){
      if(this.orderList.receiveId != null && this.orderList.receiveId > 0){
        getReceiveLog(this.orderList.receiveId).then(response => {
          console.log("receiveLog:",response)
          this.receiveLog = response.data
          this.receivePics = this.receiveLog.pics.split(",")
        })
      }
    },

    //获取商品
    getOrderGoodsDetail(id) {
      getOrderGoodsDetail(id).then(response => {
        this.goodsList = response.rows
      })
    },

    //订单信息
    getOrderlist(id){
      getOrderlist(id).then(response => {
        console.log("orderList:",response)
        this.orderList = response.data
        this.getReceiveLog()
      })
    },

    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeCtime = []
      this.resetForm("queryForm")
      this.handleQuery()
    },
    /** 提交按钮 */
    submitForm() {
      // window.close()
    },
  }
}
</script>
